import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {AppOutline, FileOutline, SearchOutline, UserOutline,} from 'antd-mobile-icons'
import {TabBar} from "antd-mobile";
import './index.scss'

const Home = () => {

    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline/>
        },
        {
            key: '/home/findHouse',
            title: '找房',
            icon: <SearchOutline/>
        },
        {
            key: '/home/news',
            title: '资讯',
            icon: <FileOutline/>
        },
        {
            key: '/home/profile',
            title: '我的',
            icon: <UserOutline/>,
        },
    ]

    // 实现路由跳转的钩子函数
    const navigate = useNavigate();
    const switchRoute = (path) => {
        navigate(path)
    }

    const location = useLocation();
    const {pathname} = location

    return (
        <div className="layout">
            <div className="container">
                <Outlet/>
            </div>

            <div className="footer">
                <TabBar onChange={switchRoute} activeKey={pathname}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title}/>
                    ))}
                </TabBar>
            </div>

        </div>
    )
}

export default Home